<!DOCTYPE html>
<html>
<head>
<title>BlocksIt.js Demonstration #1 - Random Dynamic Grid Layout</title>
<meta name="description" content="BlocksIt.js jQuery plugin Demonstration #1 random dynamic grid layout by inWebson.com"/>
<meta name="keywords" content="demonstration,demo,jquery,blocksit.js,random,dynamic,grid,layout,inwebson"/>
<link rel='stylesheet' href='style.css' media='screen' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../blocksit.min.js"></script>
<script>
$(document).ready(function() {
	//vendor script
	$('#header')
	.css({ 'top':-50 })
	.delay(1000)
	.animate({'top': 0}, 800);
	
	$('#footer')
	.css({ 'bottom':-15 })
	.delay(1000)
	.animate({'bottom': 0}, 800);
	
	//generate blocks
	var numOfClone = 20;
	for(var i=0; i<numOfClone; i++) {
		var clone = $('#container').find('.block:first').clone();
		clone.attr('id', 'clone-'+i);
		clone.css('height', (Math.floor(Math.random()*5)+1)*100);
		clone.attr('data-size', Math.floor(Math.random()*3)+1);
		
		$('#container').append(clone);
	}
	
	//blocksit define
	$('#container').BlocksIt({
		numOfCol: 7
	});
});
</script>
<link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson2/favicon.ico" />
<link rel="canonical" href="http://www.inwebson.com/demo/blocksit-js/demo1/" />
</head>
<body>

<!-- Header -->
<header id="header">
	<h1>BlocksIt.js | Dynamic Grid Layout jQuery Plugin</h1>
	<div id="backlinks">
		<a href="../">Back to Home Page &raquo;</a>
		<a href="http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/">Visit Plugin Article Page &raquo;</a>
	</div>
	<div class="clearfix"></div>
</header>

<!-- Content -->
<section id="wrapper">
	<hgroup>
		<h2>BlocksIt.js Demonstration 1</h2> 
		<h3>Random Dynamic Grid Layout (REFRESH)</h3>
	</hgroup>
	<div id="container">
		<div class="block" style="height:150px;">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh ante, venenatis at auctor sit amet, condimentum ac sem. Praesent nec consectetur nisi. Nulla id enim nisi. Etiam consequat lorem nec massa tempor pharetra. Nulla at nisi velit, non pretium tortor. Nam pharetra elementum consequat. Sed sit amet tortor neque, quis bibendum nulla. Praesent dignissim fermentum lacus eu consequat. Sed eget augue id orci accumsan tristique. Phasellus condimentum fringilla sapien, eget aliquet enim posuere sed. Nulla nisi mi, iaculis a pulvinar fermentum, fermentum id augue. <br/>
			Quisque vulputate leo id sapien rhoncus ornare. Vestibulum sit amet nunc mi. Nam malesuada ante in ipsum elementum vestibulum. Sed et velit vitae dolor euismod blandit. Aenean vehicula lobortis ipsum gravida rutrum. Vestibulum dignissim dui at ante faucibus quis ultricies ante ultrices. Praesent porta tellus id enim rutrum elementum. Aliquam ornare dui ligula, at imperdiet justo. Morbi blandit, dui vel viverra sodales, lectus nulla semper nisi, sed egestas nisl dui vitae libero. Vestibulum et lacus metus, vel porttitor turpis. Donec sodales sapien at quam semper feugiat. Fusce sem neque, vestibulum vitae dictum hendrerit, ultricies ac nunc. Fusce neque enim, tristique eu facilisis a, fermentum ac ligula. Nam libero enim, dapibus quis sollicitudin vehicula, dictum eget nibh. Aenean congue gravida aliquet. Aenean non sem lectus, vel ultricies est.
		</div>
	</div>
</section>

<!-- Footer -->
<footer id="footer">
	<span>&copy; 2012 <a href="http://www.inwebson.com">inWebson.com</a>. Design by <a href="http://www.inwebson.com/contactus">Kenny Ooi</a>. Powered by <a href="http://www.inwebson.com/jquery/">jQuery</a>.More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a></span>
</footer>

</body>
</html>